<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>收银台</title>
        <style>
            body {
                background: #f7f7f7;
                height: 100%;
                max-width: 640px;
                min-width: 300px;
                min-height: 100%;
                margin: 0 auto;
            }
        
            .mod-title {
                text-align: center;
                border-bottom: 1px solid #ddd;
                background: #fff;
            }
        
            h1 {
                font-family: "微软雅黑";
                font-size: 12px;
                margin: 5px 0;
                padding-bottom: 2px;
            }
        
            .ico_log {
                display: inline-block;
                width: 130px;
                height: 38px;
                vertical-align: middle;
                margin-right: 7px;
            }
        
            .ico-1 {
                background: url("/assets/pay/images/logo_alipay.jpg") no-repeat;
                background-size: cover;
            }
        
            .ico-2 {
                background: url("/assets/pay/images/logo_weixin.jpg") no-repeat;
            }
        
            .ico-3 {
                background: url("/assets/pay/images/logo_weixin.jpg") no-repeat;
                background-size: cover;
                margin-top: 5px;
                margin-bottom: 5px;
            }
        
            .ico-4 {
                background: url("/assets/pay/images/logo_alipay.jpg") no-repeat;
                background-size: cover;
                margin-top: 5px;
                margin-bottom: 5px;
            }
        
            .ico-7 {
                background: url("../images/udst.jpg") no-repeat;
                background-size: cover;
                margin-top: 5px;
                margin-bottom: 5px;
            }
        
            .mod-title .text {
                font-size: 20px;
                color: #333;
                font-weight: bold;
                vertical-align: middle
            }
        
            .mod-ct {
                min-width: 300px;
                max-width: 640px;
                margin: 0 auto;
                margin-top: 15px;
                margin-bottom: 15px;
                padding-bottom: 10px;
                background: #fff url("/assets/pay/images/wave.png") top center repeat-x;
                text-align: center;
                color: #333;
                border: 1px solid #e5e5e5;
                border-top: none
            }
        
            .mod-ct .order {
                font-size: 20px;
                padding-top: 10px
            }
        
            .mod-ct .amount {
                font-size: 18px;
                margin-top: 10px;
                margin-bottom: 20px;
            }
        
            .mod-ct .amount2 {
                font-size: 25px;
            }
        
            .moneySize {
                font-size: 20px;
                color: #f00;
            }
        
            .mod-ct .qr-image {
                margin-top: 30px
            }
        
            .mod-ct .qr-image img {
                width: 230px;
                height: 230px
            }
        
            .mod-ct .detail {
                margin-top: 10px;
                padding-top: 0px;
                padding-bottom: 10px;
        
            }
        
            .mod-ct .detail .arrow .ico-arrow {
                display: inline-block;
                width: 20px;
                height: 11px;
                background: url("../images/wechat-pay.png") -25px -100px no-repeat
            }
        
            .mod-ct .detail .detail-ct {
                display: none;
                font-size: 12px;
                text-align: right;
                line-height: 28px
            }
        
            .mod-ct .detail .detail-ct dt {
                float: left
            }
        
            .mod-ct .detail-open {
                border-top: 1px solid #e5e5e5
            }
        
            .mod-ct .detail .arrow {
                padding: 6px 34px;
                border: 1px solid #e5e5e5
            }
        
            .mod-ct .detail .arrow .ico-arrow {
                display: inline-block;
                width: 20px;
                height: 11px;
                background: url("../images/wechat-pay.png") -25px -100px no-repeat
            }
        
            .mod-ct .detail-open .arrow .ico-arrow {
                display: inline-block;
                width: 20px;
                height: 11px;
                background: url("../images/wechat-pay.png") 0 -100px no-repeat
            }
        
            .mod-ct .detail-open .detail-ct {
                display: block
            }
        
            .mod-ct .tip {
                margin-top: 20px;
                border-top: 1px dashed #e5e5e5;
                padding: 10px 0;
                position: relative
            }
        
            .mod-ct .tip .ico-scan {
                display: inline-block;
                width: 56px;
                height: 55px;
                background: url("/assets/pay/images/wechat-pay.png") 0 0 no-repeat;
                vertical-align: middle;
            }
        
            .mod-ct .tip .tip-text {
                display: inline-block;
                vertical-align: middle;
                text-align: left;
                margin-left: 23px;
                font-size: 16px;
                line-height: 28px;
            }
        
            .mod-ct .tip .dec {
                display: inline-block;
                width: 22px;
                height: 45px;
                background: url("../images/wechat-pay.png") 0 -55px no-repeat;
                position: absolute;
                top: -23px
            }
        
            .mod-ct .tip .dec-left {
                background-position: 0 -55px;
                left: -136px
            }
        
            .mod-ct .tip .dec-right {
                background-position: -25px -55px;
                right: -136px
            }
        
            .foot {
                text-align: center;
                margin: 30px auto;
                color: #888888;
                font-size: 12px;
                line-height: 20px;
                font-family: "simsun"
            }
        
            .copyRight {
                text-align: center;
                color: #888888;
                margin-bottom: 1px;
            }
        
            .copyRight a {
                color: #888888;
            }
        
            h1 {
                font-family: "微软雅黑";
                font-size: 12px;
                margin: 5px 0;
                padding-bottom: 2px;
            }
        
            .time-item strong {
                background: #3ec742;
                color: #fff;
                line-height: 25px;
                font-size: 15px;
                font-family: Arial;
                padding: 0 10px;
                margin-right: 10px;
                border-radius: 5px;
                box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
            }
        
            .item-title {
                background: none;
                line-height: 25px;
                font-size: 24px;
                padding: 0 10px;
                float: left;
            }
        
            .paybtn {
                display: inline-block;
                width: 100%;
                height: 80px;
                vertical-align: middle;
                padding-top: 10%;
                margin-right: 7px
            }
        
        
            .submit_alipay {
                font-size: 16px;
                font-family: Arial;
                font-weight: normal;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                border-radius: 5px;
                border: 1px solid #84bbf3;
                padding: 9px 76px;
                text-decoration: none;
                background: -moz-linear-gradient(center top, #79bbff 105%, #378de5 0%);
                background: -ms-linear-gradient(top, #79bbff 105%, #378de5 0%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
                background: -webkit-gradient(linear, left top, left bottom, color-stop(105%, #79bbff), color-stop(0%, #378de5));
                background-color: #79bbff;
                color: #ffffff;
                display: inline-block;
                text-shadow: 1px 1px 0px #528ecc;
                -webkit-box-shadow: 0px 0px 0px 0px #bbdaf7;
                -moz-box-shadow: 0px 0px 0px 0px #bbdaf7;
                box-shadow: 0px 0px 0px 0px #bbdaf7;
            }
        
            .submit_alipay:active {
                position: relative;
                top: 1px;
            }
        
            .btn {
                display: inline-block;
                padding: 6px 12px;
                margin-bottom: 0;
                font-size: 14px;
                font-weight: normal;
                line-height: 1.42857143;
                text-align: center;
                width: 80%;
                white-space: nowrap;
                vertical-align: middle;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                background-image: none;
                border: 1px solid transparent;
                border-radius: 4px;
            }
        
            .btn:focus,
            .btn:active:focus,
            .btn.active:focus {
                outline: thin dotted;
                outline: 5px auto -webkit-focus-ring-color;
                outline-offset: -2px;
            }
        
            .btn:hover,
            .btn:focus {
                color: #333;
                text-decoration: none;
            }
        
            .btn:active,
            .btn.active {
                background-image: none;
                outline: 0;
                -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
                box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
            }
        
            .btn.disabled,
            .btn[disabled],
            fieldset[disabled] .btn {
                pointer-events: none;
                cursor: not-allowed;
                filter: alpha(opacity=65);
                -webkit-box-shadow: none;
                box-shadow: none;
                opacity: .65;
            }
        
            .btn-primary {
                color: #fff;
                background-color: #428bca;
                border-color: #357ebd;
            }
        
            .btn-primary:hover,
            .btn-primary:focus,
            .btn-primary:active,
            .btn-primary.active,
            .open>.dropdown-toggle.btn-primary {
                color: #fff;
                background-color: #3071a9;
                border-color: #285e8e;
            }
        
            .btn-primary:active,
            .btn-primary.active,
            .open>.dropdown-toggle.btn-primary {
                background-image: none;
            }
        
            .btn-primary .badge {
                color: #428bca;
                background-color: #fff;
            }
        
            .f-bold {
                font-weight: bold;
                font-size: 18px;
                margin-bottom: 10px;
            }
        
            /* This css button was generated by css-button-generator.com */
            @media screen and (max-width: 768px) {
                /*body,.body {*/
                /*max-width: 100%;*/
                /*min-width: 100%;*/
                /*min-height: 100%;*/
                /*width: 100%;*/
                /*}*/
                /*.mod-title {*/
                /*height: 18rem;*/
                /*line-height: 18rem;*/
                /*}*/
                /*.ico_log {*/
                /*width: 40%;*/
                /*height: 12rem;*/
                /*margin-top: 3rem;*/
                /*}*/
            }
        </style>
    </head>

    <body>
        <h1 class="mod-title">
            <span class="ico_log {$pay.type == 'wx' ? 'ico-3' : 'ico-4'}"></span>
        </h1>

        <div class="mod-ct">
            <div class="order">
            </div>

            <div style="margin-top: 10px;">
                <span style="color: red;">提示：付款金额要与显示的金额一致，否则后果自负</span>
            </div>
            
            <div class="amount" id="money">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥<span id="copyText" class="amount2">{$pay.price}</span>元
                <span onclick="copy()" style="font-size: 10px;color: darkcyan;">&nbsp;&nbsp;复制金额</span>
            </div>

            <div class="qrcode-img-wrapper" data-role="qrPayImgWrapper">
                <div data-role="qrPayImg" class="qrcode-img-area">
                    <div class="ui-loading qrcode-loading" data-role="qrPayImgLoading" style="display: none;"></div>
                    <div style="position: relative;display: inline-block;">
                        {switch name="pay.type"}
                            {case value="wx"}
                                <img id="imgCode" src="{$pay.wxcode}" style="width: 220px;" />
                            {/case}

                            {case value="zfb"}
                                <img id="imgCode" src="{$pay.zfbcode}" style="width: 220px;" />
                            {/case}
                        {/switch}
                    </div>
                </div>
            </div>

            <div class="time-item" style="padding-top: 10px">
                <div class="time-item" id="msg">
                    <h1 class="overtime">订单名称：<span>{$pay.name}</span></h1>
                </div>

                <div class="time-item">
                    <h1>订单号:<span data-payid="{$pay.id}">{$pay.code}</span></h1>
                    <input type="hidden" value="{$pay.id}" id="payid">
                </div>

                <strong id="hour_show"><s id="h"></s>订单支付有效期</strong>
                <strong id="minute_show">0分</strong>
                <strong id="second_show">0秒</strong>
                <div class="time-item"></div>
            </div>

            <div class="tip">
                <div class="ico-scan"></div>
                <div class="tip-text">
                    {switch name="pay.type"}
                        {case value="wx"}
                            <p id="showtext">打开微信[扫一扫]</p>
                        {/case}

                        {case value="zfb"}
                            <p id="showtext">打开支付宝[扫一扫]</p>
                        {/case}
                    {/switch}
                </div>
            </div>

            <!--[if IE 8]>
                <div class="tip-text" style="color:#ff0000">您的浏览器版本较低，请升级后再试！</div>
            <![endif]-->
        </div>
    </body>
</html>

<script>
    let url = `{$Request.domain}`;
    let StatusUrl = url + '/pay/index/status';

    // 订单超时时间
    var maxtime = 3 * 60;

    function CountDown()
    {
        if(maxtime >= 0) 
        {
            minutes = Math.floor(maxtime / 60);
            seconds = Math.floor(maxtime % 60);
            msg = "订单支付有效期" + minutes + "分" + seconds + "秒";
            document.getElementById('minute_show').innerText = minutes + "分";
            document.getElementById('second_show').innerText = seconds + "秒";

            --maxtime;
        }else 
        {
            clearInterval(timers);
            clearInterval(interval);
            state = false;
            document.getElementById('imgCode').src = '/assets/pay/images/qrcode_timeout.png';

            if (window.confirm('订单已失效，请手动关闭页面，请重新下单')) {
                return true;
            } else {
                return false;
            }
        }
    }

    function GetPayId()
    {
        var payid = document.getElementById("payid").value;
        
        if (payid != "" && payid != "undefined") 
        {
            GetStatus(payid);
        }
    }

    function GetStatus(payid)
    {   
        // 创建异步对象
        let xhr = new XMLHttpRequest();

        // 设置请求类型，请求地址，是否异步 默认true
        xhr.open("post",StatusUrl, true);

        // 设置头信息
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');

        // 请求参数
        xhr.send(`payid=${payid}`);

        // 绑定异步请求状态变化事件
        xhr.onreadystatechange = function()
        {
            // readyState的值表示当前请求的状态
            if(xhr.readyState == 4)
            {
                // status存储服务器端返回的HTTP请求响应代码,它表⽰请求的处理结果
                if(xhr.status == 200)
                {
                    // 请求成功，接收服务器返回结果
                    let result = JSON.parse(xhr.responseText);

                    if(result.code === 1)
                    {
                        let jump = result.data.jump ? result.data.jump : '';

                        if(jump)
                        {
                            location.href = jump;
                        }else
                        {
                            window.history.go(-1);
                        }
                    }else
                    {
                        if(result.msg === '支付订单不存在')
                        {
                            alert(result.msg);
                            window.history.go(-1);
                        }
                    }
                }else
                {
                    // ⽹络失败或服务器错误
                    console.error('请求失败' + xhr.status);
                }
            }
        }
    }

    function copy()
    {
        var text = document.getElementById("copyText").innerText;
        var input = document.createElement('input');
        input.setAttribute('id', 'copyInput');
        input.setAttribute('value', text);

        document.getElementsByTagName('body')[0].appendChild(input);

        document.getElementById('copyInput').select();

        document.execCommand('copy')

        alert('已复制金额');

        document.getElementById('copyInput').remove();
    }

    var timers = setInterval(CountDown, 1000);

    var interval = setInterval(GetPayId, 3000);
</script>